<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .el-header a{
      color: #666;
      text-decoration: none;
    }
    .el-header a:hover{color: limegreen}
    .el-header a:active{color: dodgerblue}

    .el-carousel__item h3 {
      color: #475669;
      font-size: 20px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }

    .el-menu-item a{
      text-decoration: none;
      color: white;
    }
    .c{
      padding-top: 20px;
    }
    .c1>span{
      color: #999;
      margin-left: 10px;
      font-size: 18px;
    }
    .c1 a{
      text-decoration:none;
      color: red;

    }
    .c2{
      margin-top: 15px;
      margin-left: 10px;
    }
    .c2 img{

      width: 30px;
      height: 30px;
      vertical-align: middle;
    }
    .d span{
      color: #999;
      margin-left: 10px;
      font-size: 18px;
    }
    .d1{
      margin-bottom: 15px;
      margin-top: 15px;
    }
    .d2{
      margin-bottom: 15px;
      margin-top: 15px;
    }
    .e span{
      color: #999;
      margin-left: 10px;
      font-size: 15px;
    }

  </style>
</head>
<body>
<div id="app">
  <el-container>
    <!--头-->
    <el-header height="150px" >
      <!--e宠和右边超链接-->
      <div style="width: 1400px;margin: 0 auto">
        <img src="../imgs/img.png" style="vertical-align: middle" width="10%">
        <a href="">商品分类</a><el-divider direction="vertical"></el-divider>
        <a href="">品牌特卖</a><el-divider direction="vertical"></el-divider>
        <a href="">潮品视频</a><el-divider direction="vertical"></el-divider>
        <a href="">清仓特价</a><el-divider direction="vertical"></el-divider>
        <a href="">狗狗</a>
      </div>
      <!--导航 菜单-->
      <div style="background-color: limegreen">
        <el-menu style="width: 1400px;margin: 0 auto"
                 mode="horizontal" background-color="limegreen"
                 text-color="#fff" active-text-color="#fff">
          <el-submenu index="1">
            <template slot="title">狗狗</template>
            <el-menu-item index="1-1"><a href="">狗狗</a></el-menu-item>
            <el-menu-item index="1-2"><a href="">猫猫</a></el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">狗狗主粮</template>
            <el-menu-item index="2-1"><a href="">狗狗主粮</a></el-menu-item>
            <el-menu-item index="2-2"><a href="">狗狗零食</a></el-menu-item>
            <el-menu-item index="2-3"><a href="">狗狗玩具</a></el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">进口狗粮</template>
            <el-menu-item index="3-1"><a href="">进口狗粮</a></el-menu-item>
            <el-menu-item index="3-2"><a href="">国产狗粮</a></el-menu-item>
            <el-menu-item index="3-3"><a href="">冻干狗粮</a></el-menu-item>
          </el-submenu>
          <!--搜索框-->
          <div style="float: right;position: relative;top: 10px">
            <el-input type="text">
              <el-button slot="append" icon="el-icon-search">搜索</el-button>
            </el-input>
          </div>
        </el-menu>
      </div>
    </el-header>
    <!--体，分为2个卡片-->
    <el-main style="width: 1400px;margin: 0 auto;position: relative;top: 50px" >
      <!--左侧轮播图-->
      <el-row gutter="40" style="border:purple">
        <el-col span="12">
          <el-card>
            <div style="width: 100%">
              <el-carousel height="700px">
                <el-carousel-item v-for="url in arr">
                  <img :src="url" width="100%" height="100%">
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-card>
        </el-col>
        <!--右侧卡片-->
        <el-col span="12">
          <el-card>

            <h3>加拿大原装进口纽顿nutram number 无谷低升糖系列 T28鲑鱼&鳟鱼配方小型&玩赏犬粮 6kg</h3>
            <div style="font-size: 14px;color: #e3393c;margin-top: 10px;display: block;">
              WDJ推荐 无谷低升糖草本组合配方 放心食材 消化易吸收
            </div>
            <div>
              <div style=" margin-top: 15px; background: url(/imgs/wave.png) no-repeat">
                <div style="padding: 20px;">
                  <div style="float: left;color:white;">此商品参与“换季无忧 品质特惠”活动</div>
                  <span style=" margin-left:180px;color: white">距结束仅剩??天</span>
                </div>
              </div>

              <div style="background: url(/imgs/img_5.png) no-repeat;margin-top: 0px;">
                <div style="padding: 10px;">
                  <span style="float: left;color: #999;line-height: 50px">活动价:</span>
                  <span style="margin-left: 10px">
                    <span style="color: #e3393c;font-size: 20px;">￥</span>
                    <span style="font-size: 30px;color: #e3393c;font-weight: 700;">369.00</span>
                    <del style="color: #333;text-decoration: line-through;">¥525.00</del>
                  </span>
                </div>
              </div>
              </div>

            <div class="c">
              <div class="c1">
                <span>月销:<a href="">6982</a><span style="color: black">袋</span></span>
                <span>评价:<a href="">(1533)</a></span>
                <span>资讯:<a href="">(1)</a></span>
                <span>赠送:</span>
                <span style="color: black;margin-left:0">最多
                  <span style="color: limegreen;">52</span>
                  E宠币</span>
              </div>
              <div class="c2">
                <span><img src="../imgs/img_8.png"></span>
                <span>正品保证</span>
                <el-divider direction="vertical"></el-divider>
                <span><img src="../imgs/img_9.png"></span>
                <span>99元包邮</span>
                <el-divider direction="vertical"></el-divider>
                <span><img src="../imgs/img_10.png"></span>
                <span>30天退货</span>
              </div>
            </div>

            <!--分割线1-->
            <el-divider></el-divider>
            <div class="d">
              <div  class="d1">
                <span>规格:
                  <span><a href="" style="text-decoration: none;color: black">1.82kg</a></span>
                  <span><a href="" style="text-decoration: none;color: black">6kg</a></span>
                </span>
              </div>
              <div class="d2">
                <span>我要买:
                <span style="color: black">1</span>
                  <span style="color: black">袋</span>
                </span>
              </div>
              <div class="d3">
                <span>送货至:
                  <!--想实现一个选择器的效果-->
<!--                  <span>-->
<!--                    <template>-->
<!--                      <el-select v-model="value" placeholder="南京">-->
<!--                                <el-option-->
<!--                                        v-for="item in options"-->

<!--                                        :label="item.label"-->
<!--                                        :value="item.value">-->
<!--                                </el-option>-->
<!--                      </el-select>-->
<!--                    </template>-->

<!--                  </span>-->
                </span>
              </div>
            </div>

            <!--分割线2-->
            <el-divider></el-divider>
            <div class="e">
              <span>16点前下单，当天发货。
              <a href="" style="text-decoration: none">运费详情>></a>
              </span>
            </div>
            <!--购物车-->
            <div>
              <el-button type="primary"
                         style="margin-bottom: 36px;
                         border: limegreen;
                          margin-top: 40px;
                          margin-left: 15px;
                          width: 170px;
                          height: 70px;
                          background-color: limegreen">

                <a href="" style="text-decoration: none;color: white;font-size: 24px">加入购物车</a>
              </el-button>
            </div>

          </el-card>
        </el-col>

      </el-row>
    </el-main>

  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        /*选择器中的数据*/
        // options: [{
        //   value: '选项1',
        //   label: '雨花台区'
        // }, {
        //   value: '选项2',
        //   label: '江宁区'
        // }, {
        //   value: '选项3',
        //   label: '栖霞区'
        // }, {
        //   value: '选项4',
        //   label: '江北新区'
        // }, {
        //   value: '选项5',
        //   label: '建邺区'
        // }],
        // value: '',
        arr: ["imgs/img_3.png", "imgs/img_4.png", "imgs/img_6.png", "imgs/img_7.png"],
      }

    },
    methods:{

    }
  })
</script>
</html>